<!--
 * @Author: 冕上 cxm66888@163.com
 * @Date: 2024-10-15 16:02:56
 * @LastEditors: 冕上 cxm66888@163.com
 * @LastEditTime: 2025-07-02 16:42:26
 * @Description: 
 * 
 * Copyright (c) 2024 by xiaoMing.Cao, All Rights Reserved. 
-->
<template>
  <div class="bottle">
    <div class="bottle-head">
      <el-form :inline="true" :model="form" class="demo-form-inline" size="default">
        <el-form-item label="类型">
          <el-select v-model="parament.type" placeholder="请选择举报类型">
            <el-option label="全部" value="" />
            <el-option label="瓶子" value="bottle" />
            <el-option label="动态" value="trends" />
            <el-option label="评论" value="comment" />
            <el-option label="聊天内容" value="chat" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottle-mian">
      <el-table :data="data.list" style="width: 100%">
        <el-table-column label="类型" style="display: flex; align-items: center">
          <template #default="scope">
            {{ typeArray[scope.row.reportType] }}
          </template>
        </el-table-column>
        <el-table-column label="举报原因">
          <template #default="scope">
            {{ reasonArray[scope.row.reason] }}
          </template>
        </el-table-column>
        <el-table-column label="举报次数" prop="reportCount"></el-table-column>
        <el-table-column label="举报时间" prop="createdAt"></el-table-column>
        <el-table-column label="被举报昵称" prop="reportName"></el-table-column>
        <el-table-column prop="content" width="580" label="内容" />
        <el-table-column label="图片内容">
          <template #default="scope">
            <el-image style="width: 100px; height: 100px" v-for="item in scope.row.imgUrl" :src="item" fit="contain" :zoom-rate="1.2" :z-index="99999" :max-scale="7" :min-scale="0.2" :preview-src-list="scope.row.imgUrl" preview-teleported />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="danger" @click="selectItem(scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 15px" :size="parament.pageSize" :page-size="parament.pageSize" @change="pageChange" background layout="prev, pager, next" :total="data.total" />
    </div>
    <el-dialog v-model="dialogFormVisible" title="处理举报" width="500">
      <el-form :model="dialogForm">
        <el-form-item label="" :label-width="formLabelWidth">
          <el-radio-group v-model="dialogForm.reset">
            <el-radio value="1" size="large">删除并拉黑</el-radio>
            <el-radio value="2" size="large">删除不拉黑</el-radio>
            <el-radio value="3" size="large">通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="拉黑时间" v-if="dialogForm.reset == 1">
          <el-select v-model="form.region" placeholder="请选择拉黑时长">
            <el-option label="1天" value="1" />
            <el-option label="3天" value="3" />
            <el-option label="5天" value="5" />
            <el-option label="10天" value="10" />
            <el-option label="30天" value="30" />
            <el-option label="永久" value="9999" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitDialog">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { onMounted, ref, reactive } from 'vue';
  import { getReportList, dealReport } from '@/api/user';
  const data = reactive({
    list: [],
    total: 0
  });
  const form = reactive({});
  const parament = reactive({
    pageIndex: 1,
    pageSize: 15,
    type: ''
  });

  const pageChange = item => {
    parament.pageIndex = item;
    getList();
  };

  const dialogFormVisible = ref(false);

  const dialogForm = reactive({
    reset: '',
    curItem: {}
  });

  /**
   * @description: 映射表
   * @return {*}
   */
  const typeArray = {
    trends: '动态',
    comment: '评论',
    chat: '聊天内容',
    bottle: '瓶子',
    workComment: '作品评论'
  };

  const reasonArray = {
    1: '低俗色情',
    2: '政治敏感',
    3: '违法行为',
    4: '广告欺诈',
    5: '恶意攻击谩骂',
    6: '未成年有害行为',
    7: '不尊重女性',
    8: '恶意诋毁',
    9: '刷水/广告',
    10: '感官不适',
    12: '违规二维码',
    11: '其他'
  };
  const getList = () => {
    getReportList(parament).then(res => {
      if (res.code == 200) {
        data.list = res.data?.list ?? [];
        data.total = res.data?.total ?? 0;
      }
    });
  };
  getList();
  const submitForm = () => {
    getList();
  };

  const curItem = reactive({});
  // 选择处理
  const selectItem = item => {
    dialogForm.curItem = item;
    dialogFormVisible.value = true;
  };
  const submitDialog = () => {
    // 判断，如果选择了拉黑且删除，则必须验证拉黑时间
    if (!dialogForm.reset) {
      ElMessage({
        type: 'error',
        message: '请选择处理方式'
      });
      return;
    }
    if (dialogForm.reset == 1 && !form.region) {
      ElMessage({
        type: 'error',
        message: '请选择拉黑时间'
      });
      return;
    }
    if (dialogForm.reset == 3) {
      // 拉黑时间设置为""
      form.region = '';
    }
    // 提交处理
    dealReport({
      id: dialogForm.curItem._id,
      type: dialogForm.reset,
      reportedUserid: dialogForm.curItem.reportedUserid,
      reportId: dialogForm.curItem.reportId,
      date: form.region,
      reportType: dialogForm.curItem.reportType
    }).then(res => {
      if (res.code == 200) {
        getList();
      } else {
        ElMessage({
          type: 'error',
          message: '处理错误！'
        });
      }
    });
    dialogFormVisible.value = false;
  };
</script>
<style scoped lang="scss">
  .bottle {
    padding: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .bottle-head,
    .bottle-mian {
      background-color: #fff;
      display: flex;
      padding: 15px;
      box-sizing: border-box;
      width: 100%;
      margin-bottom: 15px;
      flex-direction: column;
    }
  }
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  .el-table__header {
    background-color: #d3e3fd;
  }
  .table-img {
    width: 100px;
    height: auto;
  }
</style>
